<template>
  <a-spin :spinning="loading">
    <!-- 标题 -->
    <div class="modal-header">
      <div class="modal-title">
        <span>{{ l('SelectOneUser') }}</span>
      </div>
    </div>
    <div class="modal-body">
      <a-input-search
        v-model:value="filterText"
        :placeholder="l('Search')"
        enter-button
        @search="refresh"
        style="margin-bottom: 10px"
      />
      <a-table
        size="middle"
        :scroll="{ x: tableWidthScroll, y: tableHeightScroll }"
        :rowKey="(record) => record.value"
        :columns="columns"
        :data-source="dataList"
        @change="tableChange"
        :pagination="{
          total: totalItems,
          current: pageNumber,
          pageSize: pageSize,
          showTotal: showTotalInfo,
          showQuickJumper: true,
          showSizeChanger: true,
          change: pageNumberChange,
          showSizeChange: pageNumberChange,
          pageSizeOptions: pageSizeOptions,
          size: 'middle',
        }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            {{ record.name }}
          </template>
          <template v-if="column.key === 'actions'">
            <a-button type="link" @click="selectUser(record.value)">{{ l('Select') }}</a-button>
          </template>
        </template>
      </a-table>
    </div>
    <!-- 按钮 -->
    <div class="modal-footer">
      <a-button :disabled="saving" @click="close()" type="button">
        <close-circle-outlined />
        {{ l('Cancel') }}
      </a-button>
    </div>
  </a-spin>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { ColumnType } from 'ant-design-vue/lib/table';
  import {
    CommonLookupServiceProxy,
    ModalPagedListingComponentBase,
    FriendshipServiceProxy,
    CommonLookupFindUsersInput,
    CreateFriendshipRequestInput,
    NameValueDto,
  } from '/@/shared';

  export default defineComponent({
    mixins: [ModalPagedListingComponentBase],
    props: {
      searchText: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        // 查询用户的文本
        filterText: this.searchText,
        commonLookService: new CommonLookupServiceProxy(),
        friendshipService: new FriendshipServiceProxy(),
      };
    },
    created() {},
    methods: {
      getColumns(): ColumnType<NameValueDto>[] {
        return [
          {
            title: this.l('Name'),
            dataIndex: 'name',
            key: 'name',
            width: 200,
            ellipsis: true,
          },
          {
            title: this.l('Action'),
            dataIndex: 'actions',
            key: 'actions',
            width: 200,
            ellipsis: true,
            fixed: 'right',
          },
        ];
      },
      fetchDataList(request, finishedCallback) {
        let input = new CommonLookupFindUsersInput();
        input.filterText = this.filterText;
        input.maxResultCount = request.maxResultCount;
        input.skipCount = request.skipCount;
        this.commonLookService
          .findUsers(input)
          .finally(() => {
            finishedCallback!();
          })
          .then((res) => {
            this.showPaging(res);
          });
      },
      selectUser(userId) {
        let input = new CreateFriendshipRequestInput();
        input.userId = userId;
        this.friendshipService.createFriendshipRequest(input).then((res) => {
          this.success(res);
        });
      },
    },
  });
</script>

<style></style>
